<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性的getter与setter</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 每一个计算属性包含getter 和 setter方法，我们前面使用的计算属性方式是默认方式，只有getter方法 
        只是利用了getter来获取、读取数据。在需要的时候，我们可以通过setter函数来手动修改 计算属性的值
        当我们尝试修改计算属性的时候，它会让计算属性触发setter函数，从而执行函数内部自定义处理程序，
        最后实现类似属性值被修改的语法 => xxx = xxx赋值 
    -->
    <p>{{fullName}}</p>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        firstName:'Shane',
        lastName:'He',
      },
      computed:{
        // 计算属性 默认用法  匿名函数

        fullName:{ // 计算属性 完整的用法，对象， 对象里面必须有 get 和 set 键值对
            get(){
                console.log("get方法被调用");
                return this.lastName + " " + this.firstName 
            },
            set(newValue){//有一个value值需要获取
                console.log("set方法被调用");
                console.log(newValue)//"Tim Kitty"
                names = newValue.split(" ")
                console.log(names);
                this.lastName = names[1]
                this.firstName = names[0]
            }
        }
      }
    })
  </script>
</body>
</html>